<template>
    <canvas id="myCanvas" width="500" height="500"
        style="border:1px solid #000000;position: absolute;top: 0;left: 0"></canvas>
    <canvas id="myCanvas1" width="500" height="500"
        style="border:1px solid #000000;position: absolute;top: 0;left: 0"></canvas>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';

let points: { x: number, y: number }[] = []
let ctx: CanvasRenderingContext2D | null = null
let intervalID = -1
let position = 0
let widthSet = false
onMounted(() => {
    func()

    intervalID = setInterval(() => {
        console.log(position)
        const canvas: HTMLCanvasElement = document.getElementById('myCanvas1') as HTMLCanvasElement;
        ctx = canvas.getContext('2d')!;

        const devicePixelRatio = window.devicePixelRatio || 1;
        if (!widthSet) {
            // 设置高清画布
            canvas.width = canvas.clientWidth * devicePixelRatio;
            canvas.height = canvas.clientHeight * devicePixelRatio;
            ctx.scale(devicePixelRatio, devicePixelRatio);
            widthSet = true
        }
        let w = canvas.width;
        let h = canvas.height;
        ctx.clearRect(0, 0, w, h);
        drawPoints(points, { color: "red", startRatio: 0.0 + position, lengthRatio: 0.1, lineWidth: 1 });
        position += 0.01
        console.log(Date.now())
        if (position > 0.8) {
            clearInterval(intervalID)
        }
        // const canvas: HTMLCanvasElement = document.getElementById('myCanvas') as HTMLCanvasElement;

    }, 100)
})




const interpolation = (startPoint: { x: number, y: number }, endPoint: { x: number, y: number }) => {
    const points = [];
    // 在startPoint到endPoint之间，每n像素添加一个点，并且Push到points中
    for (let x = startPoint.x; x <= endPoint.x; x += 1) {
        let y = startPoint.y + (endPoint.y - startPoint.y) * (x - startPoint.x) / (endPoint.x - startPoint.x);
        points.push({ x, y });
    }
    console.log(points)
    return points;
}

function getSublistByRatio<T>(array: Array<T>, startRatio: number, endRatio: number): Array<T> {
    if (startRatio < 0 || startRatio > 1 || endRatio < 0 || endRatio > 1 || startRatio > endRatio) {
        throw new Error('Invalid ratio values: startRatio and endRatio must be in the range [0, 1] and startRatio must be less than or equal to endRatio.');
    }

    const startIndex = Math.floor(startRatio * array.length);
    const endIndex = Math.ceil(endRatio * array.length);

    return array.slice(startIndex, endIndex);
}



function drawPoints(points: { x: number, y: number }[], configs:
    { color?: string, startRatio?: number, endRatio?: number, lengthRatio: number, lineWidth?: number }) {
    if (ctx == null) {
        console.error("ctx is null");
        return;
    }
    // 设置绘图的样式
    ctx.strokeStyle = configs.color || "#000000"; // 黑色
    ctx.lineWidth = configs.lineWidth || 2; // 1 像素宽的线
    ctx.translate(0.5, 0.5); // 平移坐标轴，使线条边缘对齐像素边界
    ctx.beginPath(); // 开始路径
    const length = Math.floor(configs.lengthRatio * points.length);

    const { startIndex, endIndex } = ((): { startIndex: number, endIndex: number } => {
        if (configs.startRatio == null && configs.endRatio == null) {
            return { startIndex: 0, endIndex: points.length }
        }
        else if (configs.startRatio != null) {
            const start = Math.floor(configs.startRatio * points.length)
            return { startIndex: start, endIndex: start + length };
        } else if (configs.endRatio != null) {
            const end = Math.ceil(configs.endRatio * points.length)
            return { startIndex: end - length, endIndex: end };
        } else {
            throw new Error("(startRatio and endRatio) are all null");
        }
    })()

    console.log(startIndex, endIndex);
    for (let i = startIndex; i < endIndex; i++) {
        if (i == startIndex) {
            ctx.moveTo(Math.round(points[i].x) + 0.5, Math.round(points[i].y) + 0.5);
        } else {
            ctx.lineTo(Math.round(points[i].x) + 0.5, Math.round(points[i].y) + 0.5);
            // ctx.lineTo(Math.floor(points[i].x), Math.floor(points[i].y) );
            // ctx.lineTo(points[i].x, points[i].y);
        }
    }

    // 实际绘制线条
    ctx.stroke(); // 进行绘制
    // window.requestAnimationFrame();
}
function func() {
    // 获取canvas元素
    const canvas: HTMLCanvasElement = document.getElementById('myCanvas') as HTMLCanvasElement;
    ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = true;
    const devicePixelRatio = window.devicePixelRatio || 1;
    // 设置高清画布
    canvas.width = canvas.clientWidth * devicePixelRatio;
    canvas.height = canvas.clientHeight * devicePixelRatio;
    ctx.scale(devicePixelRatio, devicePixelRatio);


    // 定义点的列表

    const startPoint = { x: 50, y: 100 }
    const endPoint = { x: 250, y: 380 }

    points = interpolation(startPoint, endPoint)
    // 绘制点的函数


    // 调用函数来绘制点
    drawPoints(points, {});
    // canvas.set
    // ctx!.fillStyle = "#eeeeee";
    // ctx!.fillRect(0, 0, 500, 500);
}

</script>